<template>
  <div>
    <el-upload
      class="upload-attach"
      :action="uploadUrl"
      :data="data"
      :multiple="multiple"
      :limit="limit"
      :name="name"
      :on-progress='onProgress'
      :on-success="onSuccess"
      :on-error="onError"
      :show-file-list="false"
      ref="upload">
      <el-button type="primary">批量上传</el-button>
      <span class="file-gray">只能上传图片类型</span>
    </el-upload>
    <div v-if="uploading" class="w-350">
      <span class="file-gray">正在上传：</span>
      <span class="file-gray"><i class="el-icon-document"></i>{{fileName}}</span>
      <el-progress :percentage="percentage" :status="status"></el-progress>
    </div>
    <div>
      <cms-pictrues-items :index='index'
                          :src='item'
                          v-for="(item,index) in fileList" :key="index" @getItems="getPicInfo" @delete='delFileList'
                          class="pics-items-left"></cms-pictrues-items>
    </div>

  </div>
</template>

<script>
  import {getRand} from "@/untils/random";
  import {signParams} from "@/untils/sign";
  import api from "@/api/api";
  import cmsPictruesItems from "@/components/pagecomponents/cmsPictruesItems.vue"

  var rand = getRand();
  export default {
    components: {cmsPictruesItems},
    name: "cms-pictrues",
    props: {
      propList: {
        type: Array,
        default: function () {
          return []
        }
      },
      uploadName: {
        type: String,
        default: "上传"
      },
      //提交地址,默认为/upload/o_upload
      action: {
        type: String,
        default: ""
      },
      //是否支持多文件上传
      multiple: {
        type: Boolean,
        default: true
      },
      //支持最大上传文件数
      limit: {
        type: Number,
        default: 9999
      },
      //是否显示上传文件列表
      show_file_list: {
        type: Boolean,
        default: true
      },
      //文件提交name值
      name: {
        type: String,
        default: "uploadFile"
      },
      //上传路径
      uploadPath: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        uploadUrl: this.$store.state.sys.baseUrl + (this.action == "" ? this.$api.bsaeUpload : this.action),
        params: {
          appId: process.env.appId,
          sessionKey: localStorage.getItem("sessionKey"),
          type: "image",
          nonceStr: rand,
          mark: false,
          uploadPath: this.uploadPath
        },
        obj: {
          fileName: "",
          fileSize: "",
          uploadPath: ""
        },
        data: {},
        fileList: [],
        uploading: false,
        percentage: 0,
        status: '',
        fileName: '',
      };
    },

    methods: {
      getPicInfo(src, index) {
        this.$set(this.fileList, this.fileList[index], src);
        this.$emit('change', this.fileList);//返回列表
      },
      onProgress(event, file, fileList) {
        this.status = '';
        this.uploading = true;
        this.fileName = file.name;
        this.percentage = parseInt(event.percent);
      },
      delFileList(index) {
        this.fileList.splice(index, 1);
        this.$emit('change', this.fileList);//返回列表
      },
      onSuccess(response, file, fileList) {
        if (response.code == '200' && response.body != '') {
          this.status = 'success';
          this.fileList.push({name: '', path: response.body.uploadPath});
        } else {
          this.status = 'exception';
        }
        setTimeout(() => {
          this.uploading = false;
          this.fileName = '';
          this.percentage = 0;
        }, 500);
        this.$emit('change', this.fileList);//返回列表
      },
      onError(err, file, fileList) {
        this.errorMessage("上传失败");
        this.$refs["upload"].clearFiles();
        this.$emit("on-error", file, fileList);
        this.$emit('change', this.fileList);//返回列表
      },
    },
    watch: {
      propList: {
        handler(curVal, oldVal) {
          if (this.propList.length > 0) {
            this.fileList = this.propList;
          }
        },
        deep: true
      }
    },
    created() {
      if (this.propList.length > 0) {
        this.fileList = this.propList;
      }
      this.data = signParams(this.params, process.env.appKey);
    }
  };
</script>

<style scope lang='scss'>

  .file-gray {
    font-size: 12px;
    line-height: 1;
    padding-top: 6px;
    color: #acb5bb;
  }

  .cms-delete-little {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #ff8b53;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }

  .cms-file-label {
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-right: 0;
    justify-content: space-between;

    .cms-file-label {
      float: left;
      width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cms-delete-little {
      float: right;
      margin-right: 10px;
    }
  }

  .pics-items-left {
    float: left;
    margin-right: 55px;
  }
</style>
